﻿<!DOCTYPE HTML>
<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% String path = request.getContextPath(); %>
<html xmlns:wb="http://open.weibo.com/wb">
<head>
    <script type="text/javascript" async="" src="<%=path%>/static/web/js/conversion.js"></script>
    <script src="<%=path%>/static/web/js/allmobilize.min.js" charset="utf-8" id="allmobilize"></script>
    <style type="text/css"></style>
    <meta content="no-siteapp" http-equiv="Cache-Control">
    <link media="handheld" rel="alternate">
    <!-- end 云适配 -->
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>职位订阅</title>
    <meta content="23635710066417756375" property="qc:admins">
    <meta name="description" content="拉勾网是3W旗下的互联网领域垂直招聘网站,互联网职业机会尽在拉勾网">
    <meta name="keywords"
          content="拉勾,拉勾网,拉勾招聘,拉钩, 拉钩网 ,互联网招聘,拉勾互联网招聘, 移动互联网招聘, 垂直互联网招聘, 微信招聘, 微博招聘, 拉勾官网, 拉勾百科,跳槽, 高薪职位, 互联网圈子, IT招聘, 职场招聘, 猎头招聘,O2O招聘, LBS招聘, 社交招聘, 校园招聘, 校招,社会招聘,社招">
    <meta content="QIQ6KC1oZ6" name="baidu-site-verification">
    <script type="text/javascript">
        var ctx = "http://www.lagou.com";
    </script>
    <link href="http://www.lagou.com/images/favicon.ico" rel="Shortcut Icon">
    <link href="<%=path%>/static/web/css/style.css" type="text/css" rel="stylesheet">
    <link href="<%=path%>/static/web/css/external.min.css" type="text/css" rel="stylesheet">
    <link href="<%=path%>/static/web/css/popup.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="<%=path%>/static/web/js/jquery.1.10.1.min.js"></script>
    <script src="<%=path%>/static/web/js/jquery.lib.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="<%=path%>/static/web/js/ajaxfileupload.js"></script>
    <script src="<%=path%>/static/web/js/additional-methods.js" type="text/javascript"></script>
    <!--[if lte IE 8]>
    <script type="text/javascript" src="<%=path%>/static/web/js/excanvas.js"></script>
<![endif]-->
    <script type="text/javascript">
        var youdao_conv_id = 271546;
    </script>
    <script src="<%=path%>/static/web/js/conv.js" type="text/javascript"></script>
    <script src="<%=path%>/static/web/js/ajaxCross.json" charset="UTF-8"></script>
    <style>
        .hidden{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            position: fixed;
            top:0;
            left: 0;
            z-index: 100;
        }
        .popup{
            position: absolute;
            top: 150px;
            left: 700px;
            background-color: #00FFFF;
            z-index: 100;
        }
        .popup p{
            text-align: center;
            size: 30px;
        }
        #prompt{
            position: fixed;
            top:150px;
            left: 400px;
            width: 650px;
            background-color: #FFFFFF;
        }
        #prompt h2{
            font-size: 30px;
            color: red;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            getSubscribe();
            selectIndustry();
            selectMoney();
            $(".sedit").click(edit);
            $("#cancel").click(cancleEdit);
            $("#create").click(createSubscibe);
            $("#exit").click(cancel);
            $("#confirmCancel").click(confirmCancel);
            <c:if test="${cookie.msg.value == 'updateSuccess'}">
            $("#updateSuccess").fadeIn(1000);
            $("#updateSuccess").fadeOut(3000);
            </c:if>
            <c:if test="${cookie.msg.value == 'insertSuccess'}">
            $("#subSuccess").fadeIn(1000);
            $("#subSuccess").fadeOut(3000);
            </c:if>
            <c:if test="${empty subscribes}">
            $("#prompt").fadeIn(1000);
            $("#prompt").fadeOut(4000);
            </c:if>
        });
        //新建订阅
        function createSubscibe(){
            if($("#created").html()<=0){
                confirm("您的可订阅次数已满！");
            }
            else{
                edit();
            }
        }
        //选择薪资
        function selectMoney(){
            $("#box_salary").on("click", "ul li", function (a) {
                a.stopPropagation();
                var b = $(this).text();
                var c = $(this).val();
                $(this).hasClass("current") ? ($(this).removeClass("current"), $("#select_salary").val("请选择月薪范围"), $("#select_salary_hidden").val("")) : ($(this).addClass("current").siblings().removeClass("current"), $("#select_salary").val(b), $("#select_salary_hidden").val(c), $("#box_salary").hide())
            })
        }
        //选择行业
        function selectIndustry(){
            $("#box_industry").on("click", "ul li", function (a) {
                a.stopPropagation();
                var b = $(this).text();
                var c = $(this).val();
                $(this).hasClass("current") ? ($(this).removeClass("current"), $("#select_industry").val("请选择行业领域"), $("#select_industry_hidden").val("")) : ($(this).addClass("current").siblings().removeClass("current"), $("#select_industry").val(b), $("#select_industry_hidden").val(c), $("#box_industry").hide())
            })
        }
        //点击编辑
        function edit() {
            $(".selected.s1").css("display", "none");
            $("#subscribeEdit").css("display", "block");
        }
        //取消编辑
        function cancleEdit() {
            $("#myForm ul li").removeClass("current");
            $("#myForm ul li").find("em").remove();
            $(".selected.s1").css("display", "block");
            $("#subscribeEdit").css("display", "none");
            $("#myForm input[type=hidden]").val("");
            $("#select_job").val("请选择职位名称");
            $("#select_industry").val("请选择行业领域");
            $("#select_salary").val("请选择月薪范围");

        }
        //获得订阅信息编辑页面
        function getSubscribe() {
            $.ajax({
                url: "/zhuang/user/subscribe",
                type: "get",
                async: false,
                success: function (mes) {
                    $("#subscribeEdit").html(mes);
                }
            });
        }
        //删除订阅提示弹框
        function delSubscribe(obj){
            var subId = $(obj).attr("rel");
            $("#subscribeId").val(subId);
            $(".hidden").css("display","block");
        }
        //确认取消订阅
        function confirmCancel(){
            var subId = $("#subscribeId").val();
            $.ajax({
                url:"/zhuang/user/cancelSubscribe",
                data:{subId:subId},
                type:"get",
                async:false,
                success:function(){
                    $(".hidden").css("display","none");
                    $("#cancelSuccess").fadeIn(1000);
                    $("#cancelSuccess").fadeOut(3000);
                    setTimeout(function(){
                        $("#sub"+subId).remove();
                    },3000);
                    var count = $("#created").html();
                    count++;
                    $("#created").html(count);
                }
            });
        }
        //不取消订阅
        function cancel(){
            $(".hidden").css("display","none");
        }
    </script>
</head>
<body>
<div id="body">
    <jsp:include page="/zhuang/include/header"></jsp:include>
    <div id="container" class="sub">

        <div class="clearfix">

            <div class="content_left">
                <div class="subscribe_side mb20 c5">
                    <div class="why">我们为什么强烈推荐你</div>
                    <h2>订阅</h2>
                    <ul class="reset">
                        <li class="sub1">帮助你节省浏览和筛选时间，快速找到适合的职位信息。</li>
                        <li class="sub2">我们会严格按照你订阅的频次和条件给你推送，并对你的个人信息绝对保密。</li>
                    </ul>
                </div>
            </div>

            <div class="content_l">
                <h1>我的职位订阅</h1>
                <c:if test="${!empty subscribes}">
                    <c:forEach items="${subscribes}" var="subscribe">
                        <div class="selected s1" id="sub${subscribe.id}">
                            <h2>${subscribe.industryJob.industryName}</h2>
                            <div class="sbox">
                                <a rel="${subscribe.id}" class="sclose" onclick="delSubscribe(this)" ></a>
                                <a rel="${subscribe.id}" class="sedit" href="javascript:void(0)"></a>
                            </div>
                            <span>
                                    ${subscribe.city.cityName}
                                    /${subscribe.industry==null?"不限":subscribe.industry.industryName}
                                    /${subscribe.stage==null?"不限":subscribe.stage.stageName}
                                    /${subscribe.money==null?"不限":subscribe.money.range}
                                    /${subscribe.cycle.title}
                                </span>
                            <input type="hidden" value="${subscribe.id}"  id="oi${subscribe.id}"/>
                            <input type="hidden" id="pr${subscribe.id}" value="${subscribe.city.province.provinceName}" data="${subscribe.city.province.id}">
                            <input type="hidden" id="pn${subscribe.id}" value="${subscribe.industryJob.industryName}" data="${subscribe.industryJob.id}">
                            <input type="hidden" id="ci${subscribe.id}" value="${subscribe.city.cityName}" data="${subscribe.city.id}">
                            <input type="hidden" id="inf${subscribe.id}" value="${subscribe.industry.industryName}" data="${subscribe.industry.id}">
                            <input type="hidden" id="fs${subscribe.id}" value="${subscribe.stage.stageName}">
                            <input type="hidden" id="sa${subscribe.id}" value="${subscribe.money.range}" data="${subscribe.money.id}">
                            <input type="hidden" id="smp${subscribe.id}" value="${subscribe.cycle.title}">
                        </div>
                    </c:forEach>
                </c:if>
                <div id="subscribeEdit" style="display: none;"></div>
            </div>

            <div class="content_r">
                <div>
                    <a href="javascript:void(0)" class="btn_big" id="create">新建订阅</a>
                    <div class="apply_num">共可创建 <span>${userSubscribeCount}</span> 个，还可创建 <span id="created">${userSubscribeCount-userinfo.subscribeCount}</span> 个</div>
                </div>
                <div>
                    <a href="/zhuang/user/recommended" class="btn_big" id="recommended">订阅推荐</a>
                </div>

            </div>
        </div>

        <!------------------------------------- 弹窗lightbox ----------------------------------------->
        <div id="prompt" class="popup" style="display:none;">
            <h2>你还没有添加任何订阅信息！</h2><br>
            <h2>为了更好更快的找到合适的职位</h2><br>
            <h2>我们推荐您尽快添加订阅信息！</h2>
        </div>
        <div class="popup" id="subSuccess" style="display:none;">
            <h4>职位订阅成功！</h4>
            <p>我们将定期为您推送适合您的职位，请注意查收。</p>
        </div><!--/#subscribeSuccess-->
        <div class="popup" id="updateSuccess" style="display:none;">
            <h4>订阅信息修改成功！</h4>
            <p>我们将定期为您推送适合您的职位，请注意查收。</p>
        </div><!--/#updateSuccess-->
        <div class="popup" id="cancelSuccess" style="display:none;">
            <h4>已经取消的该订阅信息！</h4>
            <p>我们不会再根据此订阅信息为你推送职位！</p>
        </div><!--/#cancelSuccess-->

        <div style="display:none;" class="hidden">
            <!--退订-->
            <div class="popup" id="cancelSub" >
                <h4>确认要退订该订阅？</h4>
                <table width="100%">
                    <tbody>
                    <tr>
                        <td align="center"><p>点击确认后你将不再收到我们为你提供的精准职位推送。</p></td>
                    </tr>
                    <tr>
                        <td align="center">
                            <input type="hidden" value="" id="subscribeId">
                            <input type="button" value="确认退订" id="confirmCancel" class="btn_s">
                            <a class="btn_s" href="javascript:void(0)" id="exit">取消</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div><!--/#cancelSub-->
        </div>
        <!------------------------------------- end ----------------------------------------->

        <script src="<%=path%>/static/web/js/sub.min.js"></script>
        <jsp:include page="/zhuang/include/backTop"></jsp:include>
    </div><!-- end #container -->
</div><!-- end #body -->
<jsp:include page="/zhuang/include/footer"></jsp:include>

<script src="<%=path%>/static/web/js/core.min.js" type="text/javascript"></script>
<script src="<%=path%>/static/web/js/popup.min.js" type="text/javascript"></script>